// src/pages/personal/styles/styles.module.less
@import "@styles/color.less";
@import "@styles/hairline.less";

// 个人资料页面样式
.page {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background-color: @bgColor;
  position: relative;
  .options {
    background: #fff;
    padding: 0 4.5333vw;
    position: relative;
    .hairline("top", @borderColor);
    margin-bottom: 3.2vw;
    li {
      position: relative;
      padding: 4vw 0;
      .hairline("top", @borderColor);
      > span {
        padding-right: 4vw;
        white-space: nowrap;
      }
      &:first-child {
        .hairline("top", transparent);
      }
      font-size: 3.7333vw;
      color: #3a3948;
      display: flex;
      justify-content: space-between;
      .value {
        display: flex;
        align-items: center;
        .avatar {
          width: 6.4vw;
          height: 6.4vw;
          overflow: hidden;
          border-radius: 50%;
          img {
            object-fit: cover;
          }
        }
        .icon {
          margin-left: 3.4667vw;
          color: #969799;
          fill: currentColor;
          width: 3.7333vw;
          height: 3.7333vw;
        }
      }
    }
  }
  .logout {
    width: 91.4667vw;
    height: 11.7333vw;
    display: block;
    background-color: @mainColor;
    color: #fff;
    font-size: 4.2667vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 9vw;
    border-radius: 1.3333vw;
  }
}

// 头像修改、性别修改样式
.list {
  width: 100%;
  overflow: hidden;
  li {
    height: 13.3333vw;
    line-height: 13.3333vw;
    text-align: center;
    font-size: 4.2667vw;
    &:last-child {
      position: relative;
      margin-top: 2.1333vw;
      height: 14.5vw;
      line-height: 14.5vw;
      color: #a5a6ab;
      &::before {
        content: "";
        height: 2.1333vw;
        width: 100%;
        position: absolute;
        left: 0;
        top: -2.1333vw;
        background: #f7f8fa;
      }
    }
  }
}

// 昵称修改、简介修改样式
.content {
  .icon {
    width: 4.5333vw;
    height: 4.5333vw;
  }
  .submit {
    color: @mainColor;
  }
  form {
    padding: 4vw 4.27vw 0 4.27vw;
    position: relative;
    .hairline("top", @borderColor);
    overflow: hidden;
    .bg {
      background: @bgColor;
    }
    .textarea {
      padding: 2.8vw;
      font-size: 3.73vw;
      width: 100%;
      color: #333;
      border-radius: 1.87vw;
      resize: none;
    }
    .count {
      text-align: right;
      padding: 2vw;
    }
    .input {
      background: @bgColor;
      padding: 2.8vw;
      font-size: 3.73vw;
      width: 100%;
      color: #333;
      margin-top: 4vw;
      border-radius: 1.87vw;
    }
  }
}